<template>
  <div>
    <!-- 调用局部组件 -->
    <tab />
    <!-- 顶部 -->
    <img
      src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
      alt=""
      class="background"
    />
    <img
      src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
      alt=""
      class="mai"
    />

    <!-- 值得买列表 -->
    <div class="wenzi">严选好物&nbsp;用心生活</div>
    <van-grid :border="false" :column-num="4" class="qwe">
      <van-grid-item v-for="(w, i) in arr" :key="i" :to="w.to"  >
        <van-image :src="w.imgs" />
        <span class="id">
          {{ w.id }}
        </span>
        <span class="text">{{ w.text }}</span>
      </van-grid-item>
    </van-grid>

    <!-- 列表页 -->
    <pubuliu />
    <AllCom />
  </div>
</template>

<script>
import tab from "../yjj/item/mynavbar.vue";
import pubuliu from "./merit/PuBuLiu.vue";

export default {
  components: {
    tab,
    pubuliu,
  },
  data() {
    return {
      arr: [
        {
          id: "好物大赏",
          text: "购物先看榜",
          imgs: "https://yanxuan.nosdn.127.net/e92a567f96b94dcea29eafea9ab42440.png?imageView&quality=65&thumbnail=120y120",
          to: "/mustBuy",
        },
        {
          id: "每月好物",
          text: "7月必买清单",
          imgs: "https://yanxuan.nosdn.127.net/75ab1b88df332b296cc420098ac7534e.png?imageView&quality=65&thumbnail=120y120",
          to: "/niceGoods",
        },
        {
          id: "超值专区",
          text: "新定价直降",
          imgs: "https://yanxuan.nosdn.127.net/be470a303bc7e255ffdfa07c7bb1779d.gif",
        },
        {
          id: "植系空间",
          text: "居家绿植指南",
          imgs: "https://yanxuan.nosdn.127.net/0a07714b326b5793d97491cf9079967b.png?imageView&quality=65&thumbnail=120y120",
          to: "/greenspace",
        },
        {
          id: "选购指南",
          text: "破解选择困难",
          imgs: "https://yanxuan.nosdn.127.net/d98cef378330167ef79c5f956814836e.png?imageView&quality=65&thumbnail=120y120",
          to: "/selectbuy",
        },
        {
          id: "晒单",
          text: "入选就有红包",
          imgs: "https://yanxuan.nosdn.127.net/9d8114ce4ef435ceac5e82120efeec4c.png?imageView&quality=65&thumbnail=120y120",
        },
        {
          id: "新品体验官",
          text: "开箱测评",
          imgs: "https://yanxuan.nosdn.127.net/ff84fdc2a3d06a3ceced0ade489b6381.png?imageView&quality=65&thumbnail=120y120",
        },
        {
          id: "书面实验室",
          text: "转眼科技床品",
          imgs: "https://yanxuan.nosdn.127.net/63a4df1df125ca66ecdd7078c256b79b.png?imageView&quality=65&thumbnail=120y120",
        },
      ],
    };
  },
};
</script>

<style scoped>
html {
  position: relative;
}
.background {
  width: 100%;
  height: 16.1875rem;
}
.mai {
  position: absolute;
  top: 5rem;
  left: 0.325rem;
  width: 4rem;
  height: 2.1563rem;
}
.wenzi {
  position: absolute;
  top: 5.625rem;
  left: 5rem;
  width: 8rem;
  height: 1.375rem;
  font-size: 0.9375rem;
  color: white;
}
.van-image {
  width: 3.75rem;
  height: 3.75rem;
}
.id {
  width: 5.25rem;
  height: 1.25rem;
  font-size: 0.875rem;
  color: #333;
  text-align: center;
}
.text {
  width: 5.25rem;
  height: 0.9375rem;
  color: #9999;
  font-size: 14px;
  text-align: center;
}
.van-grid-item {
  width: 5.625rem;
}
.van-grid {
  width: 97%;
  position: absolute;
  top: 8rem;
  left: 0.25rem;
  margin: 0 auto;
}
</style>